<template>
  <div class="cms-views-container relative poppuAd-cms-pages">
    <div class="mask-box"></div>
    <div class="poppuad-box">
      <div class="relative">
        <!-- 广告 -->
        <div class="h-5 text-right pr-7">
          <close-circle-outlined class="text-xl text-white" />
        </div>
        <div class="mx-7 text-center mt-4 relative">
          <div class="bg-white p-1">
            <img :src="imgUrl" class="w-full" alt="" />
            <span
              class="inline-block absolute top-1 left-1 px-[6px] py-[2px] text-white text-xs bg-black bg-opacity-30 rounded-tl-lg rounded-br-lg"
              >广告</span
            >
          </div>
          <button class="h-[42px] text-sm px-10 mt-5 bg-[#ff613f] rounded border-0 text-white">下一个</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const imgUrl = ref('https://img1.baidu.com/it/u=1615861081,860746622&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=450')
</script>

<style lang="less" scoped>
.poppuAd-cms-pages {
  .mask-box {
    @apply w-full h-full absolute top-0 left-0 right-0;
    background: rgba(0, 0, 0, 0.6);
  }
  .poppuad-box {
    width: 92%;

    @apply absolute left-1/2 top-1/2  p-2;
    transform: translate(-50%, -50%);
  }
}
</style>
